<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue-router@3.0.2/dist/vue-router.js"></script>
    <style>
      .fade-enter-active,
      .fade-leave-active {
        transition: opacity 0.5s ease;
      }
      .fade-enter,
      .fade-leave-active {
        opacity: 0;
      }
      .child-view {
        position: absolute;
        transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
      }
      .slide-left-enter,
      .slide-right-leave-active {
        opacity: 0;
        -webkit-transform: translate(300px, 0);
        transform: translate(300px, 0);
      }
      .slide-left-leave-active,
      .slide-right-enter {
        opacity: 0;
        -webkit-transform: translate(-300px, 0);
        transform: translate(-300px, 0);
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script>
    const Home = {
      template: `
    <div class="home">
      <h2>Home</h2>
      <p>hello</p>
    </div>
  `
    }

    const Parent = {
      data() {
        return {
          transitionName: 'slide-left'
        }
      },
      beforeRouteUpdate(to, from, next) {
        const toDepth = to.path.split('/').length
        const fromDepth = from.path.split('/').length
        this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
        next()
      },
      template: `
            <div class="parent">
            <h2>Parent</h2>
            <transition :name="transitionName">
                <router-view class="child-view"></router-view>
            </transition>
            </div>
        `
    }

    const Default = { template: '<div class="default">default</div>' }
    const Foo = { template: '<div class="foo">foo</div>' }
    const Bar = { template: '<div class="bar">bar</div>' }

    const router = new VueRouter({
    //   mode: 'history',
      routes: [
        { path: '/', component: Home },
        {
          path: '/parent',
          component: Parent,
          children: [
            { path: '', component: Default },
            { path: 'foo', component: Foo },
            { path: 'bar', component: Bar }
          ]
        }
      ]
    })

    new Vue({
      router,
      template: `
        <div id="app">
        <h1>Transitions</h1>
        <ul>
            <li><router-link to="/">/</router-link></li>
            <li><router-link to="/parent">/parent</router-link></li>
            <li><router-link to="/parent/foo">/parent/foo</router-link></li>
            <li><router-link to="/parent/bar">/parent/bar</router-link></li>
        </ul>
        <transition name="fade" mode="out-in">
            <router-view class="view"></router-view>
        </transition>
        </div>
    `
    }).$mount('#app')
  </script>
</html>
